<!--erp订单列表-->
<template>
  <div class="contain">
    <div class="listhead-fix">
      <!--search-->
      <div class="m-sech-wrap mr20">
        <router-link to='/search?type=customErp' class="m-sech-box displayflex">
          <i class="iconfont icon-search"></i>
          <div class="flex1 m-sech-ipt">
            <div class="txt">{{sechTxt || '输入客户名称或单号'}}</div>
          </div>
        </router-link>
      </div>
      <!--tab-->
      <div class="lltab mb10 ft14">
        <tab bar-active-color="#77babd" 
             defaultColor="#333333"
             active-color="#77babd"
             :line-width='2'>
          <tab-item selected 
            @on-item-click="goLink(1)">全部</tab-item>
          <tab-item 
            @on-item-click="goLink(2)">待开票</tab-item>
          <tab-item 
            @on-item-click="goLink(3)">已开票</tab-item>
          <tab-item 
            @on-item-click="goLink(4)">缺货</tab-item>
        </tab>
      </div>
    </div>
    <div class="noDate_page" v-if="items.length<=0">
      <div class="noDate_icon"><i class="iconfont icon-null"></i></div>
      暂无数据！
    </div>
    <scroller lock-x scrollbar-y use-pullup height="-188" 
              class='scroller-wrap' 
              @on-pullup-loading="loadMore1"
              v-if="items.length>0"
              :pullup-config="{
                              content: loadTxt,
                              downContent: '上拉加载',
                              height: 32,
                              loadingContent: '加载中...',
                              upContent: '上拉加载',
                            }"
              ref="Scroller">
      <div class="acpt-list">
        <div class="acpt-list-wrap mb30" v-for="item in items">
          <div class="acpt-list-head cf">
            <span class="time f-l">{{item.BillDate | timeshort}}</span>
            <em class="org f-r ft12" v-if="item.BillState == 'P03'">请在ERP中下单</em>
            <em class="org f-r ft12" v-if="item.BillState !== 'P03'" >{{item.BillState | billstate}}</em>
          </div>
          <div class="displayflex acpt-list-body">
            <i class="iconfont icon-cargo"></i>
            <div class="txt flex1" @click="gotoDet(item)">
              <p class="ft17">{{item.MedName}}</p>
              <p>{{item.BillNo}}</p>
              <p>{{item.Province | province}} {{item.City | city}} {{item.District | district}} {{item.Address}}</p>
              <p>品种数：{{item.CountSum}}个</p>
              <div class="list-tag"><i class="name">{{item.BuyerName}}</i><em class="tag">业务员</em></div>
            </div>
            <div class="acpt-list-btn">
              <div class="btn mb10" @click="gotoDet(item)" 
                   v-if="item.BillState == 'P03'">ERP下单</div>
            </div>
          </div>
        </div>
      </div>
      <div v-if="over" class="loader-over">没有更多记录了</div>
    </scroller>
    <manage-footer></manage-footer>
  </div>
</template>

<script>
import manageFooter from "@/components/core/footer/manage.footer.vue";
export default {
  name: "erpList",
  components: {
    manageFooter
  },
  data() {
    return {
      sechTxt: "",
      pgNo: 0,
      Page: 0,
      pgSize:4,
      items:[],
      totalRecords:'',
      over:false,
      billState:['P03','P08','P09','P10','P07','P05'],
      loadTxt:'上拉加载'
    }
  },
  created() {
    this.sechTxt = sessionStorage.sechtxt;
    this.getDate(1);
  },
  mounted() {
    this.$nextTick(function() {});
  },
  methods: {
    goLink(val, val1, val2) {
      sessionStorage.removeItem("sechtxt");
      this.sechTxt = "";
      this.billState = [];
      if (val==1) {
         this.billState = ['P03','P08','P09','P10','P07','P05'];
      }
      if (val==2) {
         this.billState = ['P03'];
      }
       if (val==3) {
         this.billState = ['P09','P10','P07','P05'];
      }
       if (val==4) {
         this.billState = ['P11'];
      }
      this.getDate(1);
      this.over = false;
      this.$nextTick(() => {
        if (this.items.length > 0) {
          this.$refs.Scroller.reset({
            top: 0
          });
          this.$refs.Scroller.enablePullup();
        }
      });
    },

    getDate(type) {
      if (type == 1) {
        this.Page = 0;
        this.pgNo = 0;
        this.items = [];
      }
      var self = this;
      var info = JSON.parse(localStorage.userinfo);
      var query = {
        MedName: this.sechTxt,
        BillNo: this.sechTxt,
        listGuid: this.billState,
        BespeakGUID:info.StaffID,
        TenantGuid: info.TenantGUID,
        CorpGuid: info.CorpGuid,
        Page: this.Page,
        Rows: this.pgSize
      };
      this.Ajax.post("SearchMedpoStateCode", query).then(function(resp) {
        if (resp.IsSuccess) {
          if (resp.Datas && resp.Datas.length > 0) {
            self.Page++;
            self.items = self.items.concat(resp.Datas);
          };
          self.totalRecords = resp.TotalRecords; 
          if(self.totalRecords<self.pgSize){
            self.loadTxt = '';
          }
        } else {
          self.Toast({
            message: "列表为空，请稍后刷新"
          });
        }
      });
    },
    loadMore1() {
      this.pgNo++;
      this.Page = this.pgNo * this.pgSize;
      this.getDate();
      // setTimeout(() => {
      this.$nextTick(() => {
        if (this.items.length > 0 && this.$refs.Scroller) {
          this.$refs.Scroller.donePullup();
        }
        if (this.totalRecords == this.items.length) {
          this.$refs.Scroller.disablePullup();
          this.over = true;
        }
      });
      // }, 2000)
    },
    gotoDet(value) {
      // sessionStorage.item = JSON.stringify(value);
      this.$router.push({
        path: "/order/erpDetail",
        query:{
          id:value.Guid
        }
      });
    }
  }
};
</script>